<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <!--Inicia la composicion de la pagina en la plantilla-->
    <ui:composition template="/resource/template/plantilla.xhtml">

        <!--Segmento que define el contenido del header-->
        <ui:define name="head">
            <h:head>
                <f:loadBundle basename="person.notification.label_#{logged.loggedIdiom}"  var="label" />
                <f:loadBundle basename="person.notification.message_#{logged.loggedIdiom}" var="message" />
                <script>
                    $(document).ready(function() {
                        $(".formulario").fancybox({
                            type: 'iframe',
                            width: 370,
                            height: 360,
                            scrolling: 'auto'
                        });

                        $('#frame').hide();

                        $(".mensajes").fancybox({
                            onComplete: function() {
                                $('#frame').show();
                            },
                            onCleanup: function() {
                                $('#frame').hide();
                            }
                        })

                    });
                </script>
                <script>
                    function verificar(dato)
                    {
                        var agree = confirm(dato);
                        if (agree)
                            return true;
                        else
                            return false;
                    }
                </script>
            </h:head>
        </ui:define>

        <!--Segmento que define el contenido de la pagina-->
        <ui:define name="content">
            <h:body>
                <h:form rendered="#{access.visit}">
                    <h:outputText value="#{message.m0}" class="label" rendered="#{!access.visit}"/>
                    <h:outputLink class="formulario" value="../../person/notification/nuevo.xhtml">  
                        <h:commandButton value="#{label.button4}" class="button"/>
                    </h:outputLink>
                    <c:set var="list" value="#{person_notification.list_messages()}"/>
                    <h:panelGroup layout="block" class="tableWrapper" rendered="#{not empty list}">
                        <h:dataTable var="p" value="#{list}" class="dataTable">
                            <h:column >
                                <h:outputLink class="mensajes" value="#frame">
                                    <h:commandButton class="status"
                                                     value="#{p.estatus}"
                                                     action="#frame"
                                                     >
                                        <f:ajax event="click" listener="#{person_notification.selectedRecordId(p.id)}" render=":frame"/>
                                    </h:commandButton>
                                </h:outputLink>
                            </h:column>
                            <h:column >
                                <h:commandLink class="deleteButton" actionListener="#{person_notification.deleteById(p.id)}" rendered="#{access.delete}"/>
                            </h:column>
                            <h:column >
                                <f:facet name="header">#{label.field3}</f:facet>
                                <h:outputText value="#{p.personBeans.nombre} #{p.personBeans.apellido}"/>
                            </h:column>
                            <h:column >
                                <f:facet name="header">#{label.field2}</f:facet>
                                <h:outputText value="#{p.mensaje}" class="uml-rowMessage"/>
                            </h:column>
                            <h:column >
                                <f:facet name="header">#{label.field4}</f:facet>
                                <h:outputText value="#{p.fecha}">
                                    <f:convertDateTime type="both" dateStyle="medium" timeStyle="medium" locale="es_PA"/>
                                </h:outputText>
                            </h:column>
                        </h:dataTable>

                        <!--Script necesario para cambiar el icono de estado de mail dinamicamente-->
                        <script type="text/javascript">
                            $('#frame').hide();
                            $('.status').each(function() {
                                var element = $(this);

                                if (element.val() == 'false') {
                                    element.css({
                                        'background-color': 'chocolate'
                                    });
                                }
                                element.val('');
                            });
                        </script>
                    </h:panelGroup>
                </h:form>   

                <h:panelGroup layout="block" id="frame">
                    <div class="messageWrapper">
                        <div class="field">
                            <h:outputText value="#{label.field4}:" class="label"/>
                            <h:outputText value="#{person_notification.fecha}" class="label">
                                <f:convertDateTime type="both" dateStyle="medium" timeStyle="medium" locale="es_PA"/>
                            </h:outputText>
                        </div>
                        <div class="field">
                            <h:outputText value="#{label.field3}:" class="label"/>
                            <h:outputText value="#{person_notification.personBeans.nombre} #{person_notification.personBeans.apellido}" class="label"/>
                        </div>
                        <div class="field">
                            <h:outputText value="#{label.field2}:" class="label"/>
                            <h:outputText value="#{person_notification.mensaje}"/>
                        </div>
                    </div>
                </h:panelGroup>
            </h:body>
        </ui:define>

        <!--Segemento donde se define un texto de ayuda para que el usuario pueda utilizar el formulario del contenido-->
        <ui:define name="slideHelper">
            <h3>#{help.title1}</h3>
            #{help.detail1a}
            <p>
                #{help.title2}
                <ul>
                    <li>#{help.datail2a}</li>
                </ul>
            </p>
            <p>
                #{help.title3}
                <ul>
                    <li>#{help.datail3a}</li>
                </ul>
            </p>
            <p>
                #{help.title4}
                <ul>
                    <li>#{help.datail4a}</li>
                </ul>
            </p>
        </ui:define>
    </ui:composition>
</html>